/*
 * @ddescription: 明细账单
 * @Author: along
 * @Date: 2020-1-27
 * @Last Modified by: along
 * @Last Modified time: 2020-1-27
 */
<template>
    <el-dialog
        :visible.sync="dialogTips"
        width="640px"
        title="系统公告"
        :show-close="true"
        class="financeDialog"
    >
        <div class="finace-wrap">
            <!-- <p class="finace-title">
                掌上大学退店流程说明及常见问题
            </p> -->
            <p class="finace-desc">
                您好，根据央行关于电子商务平台支付业务的整治工作实施及《电子商务法》中相关规定，为进一步保障您的资金安全，需要您按照商家后台指引尽快更换新商城财务系统。
            </p>
        </div>
        <div class="finace-foot">
            <div
                class="finace-left-button"
                @click="next()"
            >
                忽略此信息继续提现
            </div>
            <div
                class="finace-right-button"
                @click="emit()"
            >
                前往新商城财务
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            dialogTips: false,
        };
    },
    computed: {
        ...mapState({})
    },
    mounted () {
    },
    methods: {
        /**
         * @description 打开弹窗
         */
        show () {
            this.dialogTips = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogTips = false;
        },

        emit () {
            this.dialogTips = false;
            this.$emit('emit');
        },

        next () {
            this.dialogTips = false;
            this.$router.push({
                path: '/manage/market/withdraw'
            });
        }
    }
};
</script>

<style lang="less" scoped>
.financeDialog {
    .finace-wrap {
        max-height: 450px;
        overflow: hidden;
        overflow-y: auto;
    }
    .finace-title {
        height: 22px;
        width: 530px;
        color: #333333;
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
    }
    .finace-desc {
        width: 530px;
        color: #666666;
        font-size: 14px;
        line-height: 24px;
        margin: 0 0 24px 0;
    }
    .finace-foot {
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .finace-left-button {
        border: 1px solid #D8D8D8;
        width: 166px;
        height: 36px;
        border-radius: 4px;
        background: #ffffff;
        text-align: center;
        line-height: 36px;
        color: #606972;
        font-size: 14px;
        font-weight: 500;
        margin-right: 24px;
        cursor: pointer;
    }
    .finace-right-button {
        width: 166px;
        height: 36px;
        background: #20A0FF;
        color: #ffffff;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
        border-radius: 4px;
    }
}
</style>
<style lang="less">
.financeDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 52px;
        padding-right: 52px;
        padding-bottom: 0px;
    }
}
</style>